{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block extrastyle %}
  {{ block.super }}
  <link rel="stylesheet" href="{% static 'admin/css/dashboard.css' %}">
  <style>
    .dashboard-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-top: 20px;
    }
    .stats-box {
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      padding: 20px;
      flex: 1;
      min-width: 200px;
    }
    .stats-number {
      font-size: 32px;
      font-weight: bold;
      color: #447e9b;
    }
    .stats-title {
      color: #666;
      margin-bottom: 10px;
      font-size: 14px;
      text-transform: uppercase;
    }
    .chart-container {
      width: 100%;
      min-height: 300px;
      margin-top: 20px;
    }
    .data-table {
      width: 100%;
      border-collapse: collapse;
    }
    .data-table th, .data-table td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }
    .data-table th {
      background-color: #f2f2f2;
    }
    .data-table tr:nth-child(even) {
      background-color: #f9f9f9;
    }
    .flex-100 {
      flex-basis: 100%;
    }
  </style>
{% endblock %}

{% block extrahead %}
  {{ block.super }}
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumbs">
  <a href="{% url 'admin:index' %}">{% trans '首页' %}</a>
  &rsaquo; {% trans '仪表盘' %}
</div>
{% endblock %}

{% block content %}
<div id="content-main">
  <h1>{% trans '音乐推荐系统仪表盘' %}</h1>
  
  <!-- 数据摘要 -->
  <div class="dashboard-container">
    <div class="stats-box">
      <div class="stats-title">{% trans '音乐总数' %}</div>
      <div class="stats-number">{{ total_music }}</div>
    </div>
    
    <div class="stats-box">
      <div class="stats-title">{% trans '用户总数' %}</div>
      <div class="stats-number">{{ total_users }}</div>
    </div>
    
    <div class="stats-box">
      <div class="stats-title">{% trans '评分总数' %}</div>
      <div class="stats-number">{{ total_ratings }}</div>
    </div>
    
    <div class="stats-box">
      <div class="stats-title">{% trans '评论总数' %}</div>
      <div class="stats-number">{{ total_comments }}</div>
    </div>
    
    <!-- 用户增长图表 -->
    <div class="stats-box flex-100">
      <div class="stats-title">{% trans '用户增长（最近4周）' %}</div>
      <div class="chart-container">
        <canvas id="userGrowthChart"></canvas>
      </div>
    </div>
    
    <!-- 音乐流派分布图表 -->
    <div class="stats-box flex-100">
      <div class="stats-title">{% trans '音乐流派分布' %}</div>
      <div class="chart-container">
        <canvas id="genreChart"></canvas>
      </div>
    </div>
    
    <!-- 评分最高的音乐 -->
    <div class="stats-box">
      <div class="stats-title">{% trans '评分最高的音乐' %}</div>
      <table class="data-table">
        <thead>
          <tr>
            <th>{% trans '歌曲名' %}</th>
            <th>{% trans '艺术家' %}</th>
            <th>{% trans '评分' %}</th>
          </tr>
        </thead>
        <tbody>
          {% for music in top_rated_music %}
          <tr>
            <td>{{ music.song_name }}</td>
            <td>{{ music.artist_name }}</td>
            <td>{{ music.avg_rating }}/5</td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="3">{% trans '暂无评分' %}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    
    <!-- 最近上传的音乐 -->
    <div class="stats-box">
      <div class="stats-title">{% trans '最近添加的音乐' %}</div>
      <table class="data-table">
        <thead>
          <tr>
            <th>{% trans '歌曲名' %}</th>
            <th>{% trans '艺术家' %}</th>
            <th>{% trans '日期' %}</th>
          </tr>
        </thead>
        <tbody>
          {% for music in recent_music %}
          <tr>
            <td>{{ music.song_name }}</td>
            <td>{{ music.artist_name }}</td>
            <td>{{ music.upload_date }}</td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="3">{% trans '暂无音乐' %}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    
    <!-- 最近的评论 -->
    <div class="stats-box flex-100">
      <div class="stats-title">{% trans '最近评论' %}</div>
      <table class="data-table">
        <thead>
          <tr>
            <th>{% trans '用户' %}</th>
            <th>{% trans '音乐' %}</th>
            <th>{% trans '评论内容' %}</th>
            <th>{% trans '日期' %}</th>
          </tr>
        </thead>
        <tbody>
          {% for comment in recent_comments %}
          <tr>
            <td>{{ comment.user }}</td>
            <td>{{ comment.music }}</td>
            <td>{{ comment.text|truncatechars:50 }}</td>
            <td>{{ comment.created_at }}</td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="4">{% trans '暂无评论' %}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 用户增长图表
    var ctx = document.getElementById('userGrowthChart').getContext('2d');
    var userGrowthChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: [{% for week in user_growth %}'{{ week.week }}'{% if not forloop.last %}, {% endif %}{% endfor %}],
        datasets: [{
          label: '{% trans "新用户" %}',
          data: [{% for week in user_growth %}{{ week.count }}{% if not forloop.last %}, {% endif %}{% endfor %}],
          backgroundColor: 'rgba(68, 126, 155, 0.6)',
          borderColor: 'rgba(68, 126, 155, 1)',
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true,
            title: {
              display: true,
              text: '{% trans "新用户数量" %}'
            }
          },
          x: {
            title: {
              display: true,
              text: '{% trans "周" %}'
            }
          }
        }
      }
    });
    
    // 添加流派分布图表
    if (document.getElementById('genreChart')) {
      const genreCtx = document.getElementById('genreChart').getContext('2d');
      const genreChart = new Chart(genreCtx, {
        type: 'bar',
        data: {
          labels: [
            {% for genre in genre_labels %}
              '{{ genre }}'{% if not forloop.last %},{% endif %}
            {% endfor %}
          ],
          datasets: [{
            label: '音乐数量',
            data: [
              {% for count in genre_counts %}
                {{ count }}{% if not forloop.last %},{% endif %}
              {% endfor %}
            ],
            backgroundColor: 'rgba(155, 89, 182, 0.7)',
            borderColor: 'rgba(155, 89, 182, 1)',
            borderWidth: 1
          }]
        },
        options: {
          responsive: true,
          plugins: {
            legend: {
              display: false
            },
            title: {
              display: true,
              text: '音乐流派分布'
            }
          },
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
    }
  });
</script>
{% endblock %} 